<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">关于我们</el-breadcrumb-item>
      <el-breadcrumb-item>新闻公告</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 30px">
      <ul>
        <li v-for="(item, index) in dataList" :key="index">
          <div class="left">
            <strong>{{ item.strong }}</strong>
            <p>{{ item.p_1 }}</p>
          </div>
          <div class="right" @click="handleDrawer(index)">
            <h3>{{ item.h3 }}</h3>
            <p>{{ item.p_2 }}</p>
            <el-button type="warning" plain size="mini" style="float: right"
              >详情<i class="el-icon-arrow-right"></i
            ></el-button>
          </div>
        </li>
      </ul>
      <el-drawer :show-close="false" :visible.sync="drawer_1" direction="rtl">
        <img :src="imgUrl_1" alt="" />
      </el-drawer>
      <el-drawer :show-close="false" :visible.sync="drawer_2" direction="rtl">
        <img :src="imgUrl_2" alt="" />
      </el-drawer>
      <el-drawer :show-close="false" :visible.sync="drawer_3" direction="rtl">
        <img :src="imgUrl_3" alt="" />
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      drawer_1: false,
      drawer_2: false,
      drawer_3: false,
      dataList: [
        {
          strong: 10,
          p_1: "2022-06",
          h3: "毕业季献礼青春 大学生购票立减30元仅需150元",
          p_2: "一年一度毕业季又到，尽管有别离的伤感，但欢乐不会散场！武汉多罗碧加乐园毕业季献礼青春，大学生钜惠玩多罗碧加乐园！即日起至6月30日，所有大学生提前网上购票（本科、高职、大专，不含港澳台）凭有效学生证立减30元，仅需150元！每人限购5张。组团打卡多罗碧加乐园，拍视频或照片，还有机会每人获得多罗碧加乐园年卡一张哦！",
        },
        {
          strong: 14,
          p_1: "2021-05",
          h3: "感恩白衣天使，医护人员免费游",
          p_2: "即日起至2020年12月31日，全国医护人员可不限次免费游览武汉多罗碧加乐园；2021年12月31日前，全省医护人员可不限次免费游览武汉多罗碧加乐园。全国医护人员均需提前1天通过网络预约，确定出游日期，入园需持有效证件核验（医师证、护士证或与医务工作相关的其他资格证件），此门票每日限量预约。",
        },
        {
          strong: 28,
          p_1: "2021-01",
          h3: "惠游结束首个小长假",
          p_2: "今年元旦小长假首先想到的出游地就是来看看这座英雄的城市。有幸碰到武汉多罗碧加乐园灯光节，看到满园的笑脸内心充满了对过去一年的感慨与对新一年的微笑期许。2021，我们一定会越来越好！”从厦门专程来武汉过新年的程先生在多罗碧加乐园笑脸道桥上真挚的向记者表达对武汉的敬意和对新年的期盼。作为惠游活动结束后的首个小长假，武汉多罗碧加乐园元旦继续延续惠游期间的普旺态势，游客游玩热情不减，截至1月3日晚上八点整，武汉多罗碧加乐园元旦小长假共接待近4万游客，其中武汉市外游客占20%。",
        },
      ],
      imgUrl_1: require("@/assets/images/News-1.png"),
      imgUrl_2: require("@/assets/images/News-2.png"),
      imgUrl_3: require("@/assets/images/News-3.png"),
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleDrawer(index) {
      if (index === 0) {
        this.drawer_1 = true;
      }
      if (index === 1) {
        this.drawer_2 = true;
      }
      if (index === 2) {
        this.drawer_3 = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

::v-deep .el-drawer__open .el-drawer.rtl {
  width: 915px !important;
}

ul,
li {
  list-style: none;
}

li {
  background-color: #fff;
  padding: 50px 30px;
  border-bottom: 1px dashed #a0a0a0;
  display: flex;
  align-items: center;
}

li:hover h3 {
  color: #e6a23c;
}

.left {
  width: 100px;
  height: 75px;
  border: 1px solid #a0a0a0;
  border-radius: 10px;
  color: #a0a0a0;

  strong {
    padding: 10px 15px;
    border-bottom: 1px dashed #a0a0a0;
    font-size: 32px;
  }

  p {
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
  }
}

.right:hover {
  cursor: pointer;
}

.right {
  margin-left: 30px;
  p {
    color: #797979;
    margin: 20px 0;
    line-height: 26px;
  }
}
</style>
